<template>
  <div class="app-container">
    <div class="flex"> 
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="日期" prop="startDate">
        <!-- <el-date-picker style="margin-right:8px" v-model="dateSection" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
          @change="bindChangeAllDate" /> -->
        <el-date-picker v-model="queryParams.startDate" type="date" @change="bindChangeAllDate" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="warning" plain icon="Download" @click="handleExport" >导出</el-button>
  </div>

    <el-table class="cus-table" v-loading="loading" :data="tableList" v-if="headerInfo" show-overflow-tooltip  :cell-class-name="tableRowClassName">

      <el-table-column label="单位" align="center" prop="deptName" />
      <el-table-column label="划前通行费（元）" align="center" prop="">
        <el-table-column :label="moment(queryParams.startDate).format('YYYY年MM月DD日')" align="center" prop="totalFee"></el-table-column>
        <el-table-column :label="headerInfo.previousDay" align="center" prop="totalFeePreviousDay"></el-table-column>
        <el-table-column :label="headerInfo.oneYearBefore" align="center" prop="totalFeeOneYearBefore"></el-table-column>
        <el-table-column label="环比（%）" align="center" prop="totalFeeMoM"></el-table-column>
        <el-table-column label="同比（%）" align="center" prop="totalFeeYoY"></el-table-column>
      </el-table-column>
      <el-table-column label="划前累计通行费（元）" align="center" prop="">
        <el-table-column :label="headerInfo.year" align="center" prop="totalFeeYear"></el-table-column>
        <el-table-column :label="headerInfo.lastYear" align="center" prop="totalFeeLastYear"></el-table-column>
        <el-table-column label="同比（%）" align="center" prop="yearFeeYoY"></el-table-column>
      </el-table-column>
      <el-table-column label="划前占划后比" align="center" prop="backRate" />
      <el-table-column :label="moment(queryParams.startDate).format('MM月DD日')+'划后通行费'" align="center" prop="">
        <el-table-column :label="moment(queryParams.startDate).format('YYYY年MM月DD日')" align="center" prop="estimateFee"></el-table-column>
      </el-table-column>
      <el-table-column label="入口通行量（辆）" align="center" prop="">
        <el-table-column :label="moment(queryParams.startDate).format('YYYY年MM月DD日')" align="center" prop="totalEn"></el-table-column>
        <el-table-column :label="headerInfo.previousDay" align="center" prop="totalEnPreviousDay"></el-table-column>
        <el-table-column :label="headerInfo.oneYearBefore" align="center" prop="totalEnOneYearBefore"></el-table-column>
        <el-table-column label="环比（%）" align="center" prop="totalEnMoM"></el-table-column>
        <el-table-column label="同比（%）" align="center" prop="totalEnYoY"></el-table-column>
      </el-table-column>
      <el-table-column label="出口通行量（辆）" align="center" prop="totalEx">
        <el-table-column :label="moment(queryParams.startDate).format('YYYY年MM月DD日')" align="center" prop="totalEx"></el-table-column>
        <el-table-column :label="headerInfo.previousDay" align="center" prop="totalExPreviousDay"></el-table-column>
        <el-table-column :label="headerInfo.oneYearBefore" align="center" prop="totalExOneYearBefore"></el-table-column>
        <el-table-column label="环比（%）" align="center" prop="totalExMoM"></el-table-column>
        <el-table-column label="同比（%）" align="center" prop="totalExYoY"></el-table-column>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="border" v-html="remark">

    </div>

    <el-table v-loading="loading" :data="etcList" @selection-change="handleSelectionChange" v-if="headerInfo">

      <el-table-column label="日计" align="center" prop="deptName" />
      <el-table-column label="通行费" align="center" prop="totalFee" />
      <el-table-column label="入口" align="center" prop="totalEn" />
      <el-table-column label="出口" align="center" prop="totalEx" />
      <el-table-column label="入口ETC使用率" align="center" prop="enEtcRatio" />
      <el-table-column label="出口ETC使用率" align="center" prop="exEtcRatio" />
      <el-table-column label="日计" align="center" prop="deptName" />
      <el-table-column label="ETC入口" align="center" prop="etcEn" />
      <el-table-column label="ETC出口" align="center" prop="etcEx" />

    </el-table>

    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改 -->
    <el-dialog title="修改日统计报表" v-model="open" width="1000px" append-to-body>
      <el-form ref="planRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="收费站" prop="deptName">
              <el-input v-model="form.deptName" type="text" placeholder="请输入" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="时间" prop="date">
              <el-date-picker :disabled="true" style="width:100%" class="inputDeep" clearable v-model="form.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="划后通行费" prop="estimateFee">
              <el-input v-model="form.estimateFee" type="text" placeholder="请输入"  />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="划前占划后比" prop="backRate">
              <el-input v-model="form.backRate" type="text" placeholder="请输入"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup name="ClassActive">
import moment from 'moment'
import { dailyTable,updateDaily } from "@/api/charge/ticket";

import { getCKInfo } from '@/utils/auth'
import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const classActiveList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const daterangeCarryTime = ref([]);
const deptOptions = ref([])
const deptId = ref(Number(getCKInfo('deptId')))
const tableList = ref([])
const headerInfo = ref()
const remark = ref("")
const etcList = ref([])
const data = reactive({
  form: {},
  queryParams: {
    "startDate": moment().subtract(1, 'day').format("YYYY-MM-DD"),
    "endDate": moment().subtract(1, 'day').format("YYYY-MM-DD")
  },
  rules: {
    classId: [
      { required: true, message: "班组id(外键)不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);


const tableRowClassName = ({
  row, column, rowIndex, columnIndex
}) => {
  if (rowIndex == 0) {
    return 'warning-row'
  } else   if (columnIndex == 9||columnIndex == 10) {
    return 'warning-row'
  } 
  return ''
}


/** 查询班组建设 活动或会议列表 */
function getList(type) {
  loading.value = true;
  headerInfo.value = null;
  dailyTable({ ...queryParams.value }).then(response => {
    tableList.value = response.data.list;
    headerInfo.value = response.data.text;
    remark.value = response.data.remark;
    etcList.value = response.data.etc;
    loading.value = false;
  });
}
/** 查询部门下拉树结构 */
function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

function bindChangeAllDate(val) {
  queryParams.value.startDate = moment(val).format("YYYY-MM-DD");
  queryParams.value.endDate = moment(val).format("YYYY-MM-DD")


}


// 表单重置
function reset() {
  form.value = {
    id: null,
    pageType: null
  };
  proxy.resetForm("classActiveRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeCarryTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}
/** 修改按钮操作 */
function handleUpdate(row) {
  form.value = row;
  form.value.date= queryParams.value.startDate;
  open.value = true;
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["planRef"].validate(valid => {

    updateDaily(form.value).then(response => {
      proxy.$modal.msgSuccess("修改成功");
      open.value = false;
      getList();
    });
  });
}



/** 导出按钮操作 */
function handleExport() {
  proxy.download('statistics/generateDailyTable', {
    ...queryParams.value
  }, `日统计报表_${new Date().getTime()}.xlsx`)
}

getList();
getDeptTree()
  </script>
  

  <style scoped>
.border {
  border: 1px solid #f5f5f5;
  margin-bottom: 20px;
  line-height: 1.6;
  padding: 10px;
}
/deep/ .el-table .warning-row {
  background: #d8e4bc !important;
  text-align: center;
}

</style>

<style>
.cus-table.el-table .cell {
  font-size: 0.8rem;
}
.cus-table.el-table .el-table__body-wrapper {
  overflow-x: hidden;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


</style>